<template>
  <div>
    <el-card class="box-card">
      <el-form :model="user" ref="userForm" label-width="120px">
        <el-form-item label="用户名称：">
          <el-input v-model="username" disabled></el-input>
        </el-form-item>
        <el-form-item label="角色列表：">
          <el-checkbox-group v-model="selectedRoles">
            <el-checkbox
                v-for="role in roles"
                :key="role.id"
                :label="role.name"
            >{{ role.name }}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="saveRoles">保存</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: {}, // 存储特定用户的信息
      username: '', // 存储特定用户的用户名
      roles: [], // 存储所有角色
      selectedRoles: [] // 存储用户选择的角色
    };
  },
  created() {
    // 获取路由参数中的特定用户的用户名
    const username = this.$route.params.username;
    this.username = username;
    // 获取所有角色列表
    this.fetchRoles();
    this.fetchUserRoles(username); // 确保获取用户的角色信息
  },
  methods: {
    fetchRoles() {
      // 向服务器请求所有角色的列表
      this.axios.get('/api/role/get')
          .then(response => {
            // 将获取到的角色列表存储到组件数据中
            this.roles = response.data.data;
          })
          .catch(error => {
            console.error('Error fetching roles:', error);
          });
    },
    fetchUserRoles(username) {
     console.log("Username:", username); // 打印username的值
     console.log(`正在请求用户 ${username} 的角色信息...`);
      // 向服务器请求特定用户的角色信息
      this.axios.get(`/api/right/search/${username}`)
          .then(response => {
            // 将获取到的用户角色信息存储到组件数据中
            const userRoles = response.data;
            this.selectedRoles = userRoles.map(role => role.name);
          })
          .catch(error => {
            console.error('Error fetching user roles:', error);
          });
    },
    saveRoles() {
      console.log("请求体内容:", { roles: this.selectedRoles });
      // 向服务器保存用户选择的角色
      console.log("Username:", this.username);
      this.axios.post(`/api/right/assignRoles/${this.username}`, this.selectedRoles)
          .then(response => {
            if (response.data.code === "0") {
              this.$message({
                message: '授权成功',
                type: 'success'
              });
              this.$router.push(`/right}`);
            } else {
              this.$message.error(response.data.msg);
            }
          })
          .catch(error => {
            console.error('Error saving roles:', error);
            this.$message.error('角色保存失败');
          });
    }
  }
}
</script>

<style scoped>
.box-card {
  margin: auto;
  width: 600px;
}
.el-form-item {
  margin-bottom: 20px;
}
</style>
